@import url('./reset.scss');
@import url('./atomic.scss');
@import url('./common.scss');

body {
  overflow-y: scroll;
  font-size: 16px;
}

:root {
  --blur: 60px;
  --textColor: #001f3fbb;
  --textColorOpposite: #f6f5f7;
  --bgFooter: #151414;
  --baseColor: #aab7ea;
  --darkColor: #dadada;
  --firstGradientColor: #dadada;
  --lightColor: #adadad;
  --secondGradientColor: #adadad;
  --positionX: 30px;
  --positionXOpposite: -30px;
  --positionY: 30px;
  --positionYOpposite: -30px;
  --angle: 145deg;
  --size: 150px;
  --radius: 30px;
}

button {
  background: none;
  outline: none;
  appearance: none;
  border: none;
}

input {
  outline: none;
}

input[type='range'] {
  -webkit-appearance: none;
  margin: 10px 0;
  height: 0;
  width: 100%;
  background-color: transparent;
  position: relative;

  &::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px;
    cursor: pointer;
    transition: 0.2s;
    background: #001f3f;
    background: var(--textColor);
    border-radius: 3px;
  }

  &::-webkit-slider-thumb {
    box-shadow: 1px 1px 1px #30302f, 0 0 1px #30302f;
    border: 1px solid #000;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #001f3f;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -5px;
  }

  &::-moz-range-thumb {
    box-shadow: 1px 1px 1px #30302f, 0 0 1px #30302f;
    border: 1px solid #000;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #001f3f;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -5px;
  }

  &::-webkit-color-swatch-wrapper {
    padding: 0;
  }

  &::-webkit-color-swatch {
    border: none;
  }

  &:active:after,
  &:focus-within:after,
  &:focus:after,
  &:hover:after {
    content: attr(data-value);
    position: absolute;
    bottom: 100%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    color: #f6f5f7;
    color: var(--textColorOpposite);
    border-radius: 3px;
    padding: 10px;
    font-size: 14px;
    background: #001f3f;
  }

  &::-moz-range-track {
    width: 100%;
    height: 6px;
    cursor: pointer;
    transition: 0.2s;
    background: #001f3f;
    background: var(--textColor);
    border-radius: 1.3px;
  }
}

footer {
  background: var(--bgFooter);
  padding: 16px 24px;
  font-size: 15px;
}

::-webkit-scrollbar {
  /* 滚动条宽 */
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-thumb {
  /* 滚动条 拖动条 */
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
}

::-webkit-scrollbar-track {
  /* 滚动条背景槽 */
  background-color: #eee;
  border-radius: 6px;
}

* {
  scrollbar-color: #e5e5e5 #f7f7f9; /* 滑块颜色  滚动条背景颜色 */
  scrollbar-width: thin; /* 滚动条宽度有三种：thin、auto、none */
}
